---
import config from '@/site-config'

import '@waline/client/style'

import { cn } from 'astro-pure/utils'

const { class: className } = Astro.props
---

{
  config.integ.waline.enable && (
    <comment-component>
      <div id='waline' class={cn('not-prose', className)}>
        Comment seems to stuck. Try to refresh?✨
      </div>
    </comment-component>
  )
}

<script>
  import { init as walineInit } from '@waline/client'
  import type { WalineEmojiPresets } from '@waline/client'
  import config from 'virtual:config'

  const walineConfig = config.integ.waline

  class Comment extends HTMLElement {
    constructor() {
      super()
    }

    connectedCallback() {
      // Prevent Vue log errors
      ;(globalThis as unknown as { __VUE_OPTIONS_API__: boolean }).__VUE_OPTIONS_API__ = true
      ;(globalThis as unknown as { __VUE_PROD_DEVTOOLS__: boolean }).__VUE_PROD_DEVTOOLS__ = false
      ;(
        globalThis as unknown as { __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: boolean }
      ).__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false

      const emoji = walineConfig.emoji?.map(
        (preset) => `${config.npmCDN}/@waline/emojis@1.2.0/${preset}` as WalineEmojiPresets
      )

      walineInit({
        el: '#waline',
        serverURL: walineConfig.server || '',
        emoji,
        reaction: ['/icons/heart-item.svg'],
        ...walineConfig.additionalConfigs
      })
    }
  }

  if (walineConfig.enable) customElements.define('comment-component', Comment)
</script>

<style>
  /* Basic theme */
  #waline {
    /* Font size */
    --waline-font-size: 16px;
    /* Basic color */
    --waline-white: hsl(var(--background) / var(--un-bg-opacity, 1));
    --waline-light-grey: #999;
    --waline-dark-grey: #666;
    /* Theme color */
    --waline-theme-color: hsl(var(--foreground) / var(--un-text-opacity, 1));
    --waline-active-color: hsl(var(--primary) / var(--un-text-opacity, 1));
    /* Layout */
    --waline-color: hsl(var(--muted-foreground) / var(--un-text-opacity, 1));
    --waline-bg-color: hsl(var(--muted) / var(--un-bg-opacity, 1));
    --waline-bg-color-light: hsl(var(--input) / var(--un-text-opacity, 1));
    --waline-bg-color-hover: #f0f0f0;
    --waline-border-color: hsl(var(--border) / var(--un-border-opacity, 1));
    --waline-disable-bg-color: #f8f8f8;
    --waline-disable-color: #bbb;
    --waline-code-bg-color: #282c34;
    /* Special */
    --waline-bq-color: #f0f0f0;
    /* Avatar */
    --waline-avatar-size: 3.25rem;
    --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
    /* Badge */
    --waline-badge-color: hsl(var(--border) / var(--un-border-opacity, 1));
    --waline-badge-font-size: 0.775em;
    /* Info */
    --waline-info-bg-color: var(--waline-bg-color-light);
    --waline-info-color: var(--waline-color);
    --waline-info-font-size: 0.625em;
    /* Render selection */
    --waline-border: 1px solid var(--waline-border-color);
    --waline-avatar-radius: 50%;
    --waline-box-shadow: none;
  }

  /* Fix long text and links overflow */
  #waline :global(.wl-content, .wl-text, .wl-comment-text, .wl-item, .wl-card-item, a) {
    max-width: 100%;
  }
  #waline :global(.wl-meta, .wl-content, .wl-text, .wl-comment-text) {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  #waline :global(a) {
    display: inline-block;
  }
  #waline :global(.wl-item, .wl-card-item) {
    overflow: hidden;
  }

  /* Reaction buttons */
  #waline :global(.wl-reaction-title, .wl-reaction-text) {
    display: none;
  }
  #waline :global(.wl-reaction) {
    overflow: visible;
    margin-bottom: 0.5em;
  }
  #waline :global(.wl-reaction-img) {
    width: auto;
    display: flex;
    height: 35px;
    align-items: center;
    column-gap: 0.4rem;
  }
  #waline :global(.wl-reaction-votes) {
    position: inherit;
    top: inherit;
    min-width: inherit;
    inset-inline-end: inherit;
    display: flex;
    font-weight: normal;
    border: none;
    background: none;
    color: inherit;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
  }
  #waline :global(.wl-reaction-loading) {
    position: inherit;
    top: inherit;
    min-width: inherit;
  }
  #waline :global(.wl-reaction-item.active .wl-reaction-votes) {
    background: var(--waline-theme-color);
    color: var(--waline-bg-color);
  }

  #waline :global(.wl-reaction-votes:after) {
    margin-left: 0.25em;
    content: 'Like(s)';
    display: inline-block;
    clear: both;
    border: 0;
  }
  #waline :global(.wl-reaction img) {
    filter: invert(25%);
  }
  :global(.dark) #waline :global(.wl-reaction img) {
    filter: invert(75%);
  }
</style>
